<%--
  Created by IntelliJ IDEA.
  User: 夏乐
  Date: 2021/8/15
  Time: 8:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path=request.getContextPath();
%>
<html>
<head>
    <title>欢迎注册赵氏皇家大酒店</title>
    <link rel="stylesheet" type="text/css" href="css/bj.css" />
</head>
<body>
<div class="login-box" style="text-align: center">
    <h2>登录</h2>
    <img src="images/hotel_log.png"  height="100" width="320" style="border-radius: 10%;background: rgba(0,0,0,.0);">
    <br><br>
    <form id="niceform" action="login" method="post" onsubmit="return check()">
        <div class="login-field">
            <input type="text" name="username" required=""  onblur="checkName()" placeholder="" style="width: 420px"/>
            <label >用户名</label>
            <div id="nameInfo" class="text-danger" style="display:none;">用户名必须4~20位</div>
        </div>
        <div class="login-field">
            <input type="password" name="password" required="" id="password" onblur="checkPassword()" style="width: 420px"/>
            <label >密码</label>
            <div id="passwordInfo" class="text-danger" style="display: none;">密码需要6位以上</div>
        </div>
        <button type="submit" value="登入" style="margin-right: 160px">登入</button>
        <button type="reset" value="放弃" style="color: white;background-color: red;">放弃</button>
        <br><br>
        <a href="hotel_register.jsp" style="color: yellow;text-align: center">还没账号？注册</a>
    </form>
</div>
<script>
    function check() {
        if($("#name").val().length < 4 || $("#name").val().length >20 ) {//不合法
            alert("你输入的用户名不合法，需要4~20位");
            return false;
        }
        if($("#password").val().length < 3) {//不合法
            alert("你输入的密码不合法，需要3位以上");
            return false;
        }
        return true;
    }

    function checkName() {
        if($("#name").val().length < 4 || $("#name").val().length >20 ) $("#nameInfo").show();
        else {
            $("#nameInfo").hide();
            <!--此处url需要填写-->
            $.ajax({
                url:"<%=path%>",
                data:{
                    action:"isUserNameExist",
                    name: $("#name").val()
                },
                success:function (data) {
                    if(data=="yes"){}
                    else{alert("你输入的用户名不存在");}
                }
            });
        };
    }
    function checkPassword() {
        if($("#password").val().length < 3) $("#passwordInfo").show();
        else $("#passwordInfo").hide();
    }
</script>
</body>
</html>

